/*
  学习目标：根据id， 删除一条数据
*/

import React from 'react';
import Header from './components/Header';
import Main from './components/Main';

import './index.css';

export default class App extends React.Component {
  state = {
    // 用户名输入框
    username: '',
    // 评论内容
    content: '',

    list: [
      {
        id: 1,
        username: '思聪',
        content: '想你的夜',
      },
      {
        id: 2,
        username: '马芸',
        content: '我对钱不感兴趣',
      },
      {
        id: 3,
        username: '王简林',
        content: '实现一个小目标',
      },
    ],
  };

  // 1. 父组件APp中定义删除的函数
  handleDelById = (id) => {
    console.log('  ----->  ', id);
    // 4. 完成删除的计算
    // 💥 不可变数据， 新值覆盖旧值
    const newList = this.state.list.filter((item) => item.id !== id);
    this.setState({ list: newList });
  };

  render() {
    const { list } = this.state;
    return (
      <div className="app">
        <Header />
        <Main
          list={list}
          // 2、 父传子回调
          handleDelById={this.handleDelById}
        />
      </div>
    );
  }
}
